<template>
	<view class="">
		<view class="card-info" v-for="item in policyList" :key="item.policyId"
			:style="{backgroundImage:`url(${item.picture})`}">
			<view class="top-info">
				<view class="cinema-name" @click="show(item.description)">
					会员政策
				</view>
				<view class="policy-name">
					{{item.policyName}}
				</view>
			</view>
			<view class="open-card" @click="openCard(item.policyId)">
				<text>开卡</text>
				<u-icon name="play-right-fill" />
			</view>
			<!-- 		<view class="show-policy" @click="show(item.description)">
				会员政策
			</view> -->
		</view>
		<u-popup :show="showPolicy" mode='center' :round='10' @close="showPolicy=false">
			<view class="policy-content">
				<view class="title">
					会员政策
				</view>
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getMemberCard,
		getCardPolicy
	} from '@/common/http/api.js';
	export default {
		data() {
			return {
				cardList: [],
				policyList: [],
				cinemaName: '',
				showPolicy: false,
				content: ''
			}
		},
		onLoad() {
			this.initData()
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})
		},
		methods: {
			initData() {
				getMemberCard().then(res => {
					this.cardList = res.list
					this.getPolicy()
				})
				this.cinemaName = this.$store.state.cinemaName
			},
			show(agreement) {
				this.content = agreement
				this.showPolicy = true
			},

			openCard(id) {
				if (!this.$store.state.userPhone) {
					uni.navigateTo({
						url: "../../pages/getPhone/getPhone"
					})
					return
				}
				uni.navigateTo({
					url: './openCard?id=' + id
				})
			},
			getPolicy() {
				getCardPolicy().then(res => {
					const {
						cardPolicyInfos,
						code
					} = res
					if (code === "000") {
						cardPolicyInfos.map(info => {
							this.cardList.map(card => {
								if (card.policyId == info.policyId) {
									card.description = info.description
									this.policyList.push(card)
								}
							})

						})
					}
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
		}
	}
</script>

<style lang="scss">
	.card-info {
		width: 80vw;
		padding: 30rpx;
		height: 320rpx;
		margin: 30rpx auto;
		border-radius: 20rpx;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.top-info {
			position: absolute;
			left: 30rpx;
			top: 30rpx;

			.cinema-name {
				font-size: 30rpx;
				color: #fff;
			}

			.policy-name {
				color: #c0ccaa;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.open-card {
			background-color: #fff;
			width: 140rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			border-radius: 50rpx;
			text-align: center;
			display: flex;
			justify-content: center;
		}

		.show-policy {
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
			color: #fff;
			text-decoration: underline;
			font-size: 28rpx;
		}
	}

	.policy-content {
		width: 80vw;
		padding: 20rpx 30rpx;
		min-height: 350rpx;

		.title {
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
		}

		.content {
			font-size: 26rpx;
			text-align: justify;
		}
	}
</style>